<template>
  <div>
    <van-nav-bar title="会员登录" left-arrow @click-left="onClickLeft" />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <div class="tip">未注册的手机号登录后将自动登录</div>
      </div>
      <form>
        <div>
          <input type="text" placeholder="请输入手机号码" v-model="mobile">
        </div>
        <div class="img-check-box">
          <input type="text" placeholder="请输入图形验证码" v-model="picCode">
          <div><img v-if="picUrl" :src="picUrl" alt="" @click="handlePicImg"></div>
        </div>
        <div class="phone-check-box">
          <input type="text" placeholder="请输入短信验证码" v-model="smsCode">
          <input type="button" value="获取验证码" id="check-btn" @click="handleSmCode">
        </div>
        <div class="login-box">
          <input type="button" value="登录" @click="handleLogin">
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { getPicCode, getSmCode, login } from '@/api/login'
import { Toast } from 'vant'

export default {
  name: 'LoginView',
  data () {
    return {
      picKey: '', // 图形验证码的key
      picUrl: '', // 图形验证码图片url
      mobile: '17733846495', // 接收验证码的手机号
      picCode: '1234', // 用户输入的图形验证码
      totalSeconds: 5, // 总秒数
      currentSecond: 5, // 当前秒数
      timer: null,
      smsCode: '246810' // 短信验证码
    }
  },
  methods: {
    // tabbar返回上一页
    onClickLeft () {
      this.$router.go(-1)
    },
    // 获取验证码
    async getPicCode () {
      const result = await getPicCode()
      this.picUrl = result.data.base64
      this.picKey = result.data.key
    },
    // 图片验证码刷新
    handlePicImg () {
      this.getPicCode()
      Toast('刷新成功！')
    },
    // 点击获取验证码按钮，处理函数
    async handleSmCode (event) {
      // 表单合法校验，若false，直接return
      if (!this.validFn()) {
        return
      }

      // 当前有定时器，则直接return
      if (this.timer && this.totalSeconds !== this.currentSecond) {
        return
      }
      // 获取验证码
      const result = await getSmCode({
        captchaCode: this.picCode,
        captchaKey: this.picKey,
        mobile: this.mobile
      })
      if (result.status === 200) {
        this.$toast('验证码获取成功')
      } else {
        this.$toast(`${result.message}`)
        return
      }
      // 设置计时器
      this.timer = setInterval(() => {
        if (this.currentSecond === 0) {
          clearInterval(this.timer)
          event.target.value = '重新发送'
          this.currentSecond = this.totalSeconds
        } else {
          event.target.value = `重新发送(${this.currentSecond--})秒`
        }
      }, 1000)
    },
    // 进行表单校验,检验手机号和图形验证码是否合法
    validFn () {
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.$toast('手机号不合法')
        return false
      }
      if (!/^\d{4}$/.test(this.picCode)) {
        this.$toast('验证码错误')
        return false
      }
      return true
    },
    async handleLogin () {
      this.validFn()

      // 短信验证码合法性校验
      if (!/\w{6}$/.test(this.smsCode)) {
        this.$toast('验证码不合法')
        return
      }
      const result = await login(this.smsCode, this.mobile)
      this.$store.commit('user/setUserInfo', result.data)
      this.$toast({
        message: result.message,
        position: 'bottom'
      })
      const url = this.$route.query.backUrl || '/'
      this.$router.replace(url)
    }
  },
  async created () {
    this.getPicCode()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 320px;
  margin: 0 auto;

  .title {
    h3 {
      margin: 10px 0;
      font-size: 26px;
    }

    .tip {
      color: #d1d1d1;
      font-size: 12px;
      margin: 10px 0;
    }
  }

  form {
    >div {
      border-bottom: 1px solid #f0f0f0;
      margin-bottom: 20px;

      input {
        font-size: 16px;
        border: none;
        width: 300px;
        height: 50px;
        line-height: 50px;
      }

    }

    .phone-check-box {
      display: flex;
      align-items: center;

      #check-btn {
        width: 100px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #f9ac2e;
        background: none;
      }
    }

    .img-check-box {
      display: flex;

      >div {
        width: 100px;
        line-height: 50px;
        text-align: center;

        img {
          width: 100px;
          height: 30px;
          vertical-align: middle;
        }
      }
    }

    .login-box {
      input {
        height: 40px;
        line-height: 40px;
        background: #f9ac2e;
        color: white;
        border-radius: 25px;
      }
    }
  }
}
</style>
